<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="js/vue.js"></script>
    <!--异步调用axios封装底层ajax-->
    <script src="js/axios.js"></script>
    <!--elementUI 引入样式   基于Vue-->
    <link rel="stylesheet" href="CSS/eleui.css">
    <!--elementUI 引入组件库 基于Vue-->
    <script src="js/eleui.js"></script>
</head>
<body>
<div id="app">
   <!-- <input type="button" value="点我!!!" @click="getHello()">
    <input type="button" value="戳我!!!" @click="getUser()">
    <input type="button" value="捅我!!!" @click="getList()">
    <input type="button" value="显示!!!" @click="getEmpById()">
    <input type="button" value="buil!!!" @click="getOne()">-->
    <input type="button" value="查询显示!!!" @click="getAllEmp()">
    <!--{{}}插值表达式-->
    <!--<h1>{{ list }}</h1>-->
    <!--<h2>{{ obj }}</h2>-->

    <ul>
        <li v-for="(value,key) in list">
            {{ value }} ---- {{ key }}
        </li>
    </ul>

<!--element-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="empName"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="empAge"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="empSex"
                label="性别"
                width="180">
        </el-table-column>
        <el-table-column
                prop="empSalary"
                label="工资"
                width="180">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="修改时间"
                width="180">
        </el-table-column>
    </el-table>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "",
            obj: null,
            list:null,
            /*element*/
            tableData: []
        },
        methods: {
           /* getHello: function () {
                var Axios = axios.create();//创建axios对象
                Axios.get("/hello").then(function (response) {
                    var res = response.data
                    //如果res.success值为0，证明后台返回成功
                    if (res.success == 0) {
                        //将后台返回值绑定到data中的msg属性中
                        vue.msg = res.message;
                    }
                })
            },
            getUser: function () {
                var Axios = axios.create();
                Axios.get("/user").then(function (response) {
                    var res = response.data
                    if (res.success === 0) {
                        vue.obj = res.data
                        vue.tableData.push(vue.obj);
                    }
                })
            },
            getList:function () {
                var Axios=axios.create();
                Axios.get("/list").then(function (response) {
                    var resp=response.data
                    if(resp.success===0){
                        vue.list=resp.data;
                        vue.tableData.push(vue.list);
                    }

                })
            },
            getEmpById:function () {
                var Axios=axios.create();
                Axios.get("/getEmpById?id=1").then(function (response) {
                    var respo=response.data
                    if(respo.success===0){
                        vue.obj=respo.data;
                        vue.tableData.push(vue.obj);
                    }
                })
            },*/

            getOne:function () {
                var   Axios=axios.create();
                Axios.get("/one").then(function (response) {
                    var respoo=response.data
                    if(respoo.success===0){
                        vue.obj=respoo.data;
                        vue.tableData.push(vue.obj);
                    }
                })
            },
            getAllEmp:function () {
                var Axios=axios.create();
                Axios.get("/selectAll").then(function (response) {
                    var empAll=response.data;
                    if(empAll.success===0){
                        vue.list=empAll.data;
                        vue.tableData.push(vue.list);
                    }
                })
            }
        }
    });




</script>